<template>
<!--  <div class="rightContainer">-->
<!--    <div class="rightContainer-rightBox">-->
<!--      <div>-->
<!--        <div-->
<!--          class="rightContainer-rightBox-manageBox"-->
<!--          v-for="(item, index) in manageData"-->
<!--          :key="index"-->
<!--          :style="{ backgroundImage: 'url(' + item.url + ')' }"-->
<!--        >-->
<!--          <div>{{ item.name }}</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="rightContainer-rightBox-toggle">-->
<!--        <div-->
<!--          class="rightContainer-rightBox-toggle-noAction"-->
<!--          :class="{ active: activeTab === 'video' }"-->
<!--          @click="setActiveTab('video')"-->
<!--        >-->
<!--          视屏监控-->
<!--        </div>-->
<!--        <div-->
<!--          class="rightContainer-rightBox-toggle-noAction"-->
<!--          :class="{ active: activeTab === '2d' }"-->
<!--          @click="setActiveTab('2d')"-->
<!--        >-->
<!--          2D面板-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
</template>

<script setup>
// import { ref, onMounted } from "vue";
// import bgcAlarmImage from "../../assets/images/home/bgc_alarm.png";
//
// const manageData = ref([
//   {
//     url: bgcAlarmImage,
//     name: "告警管理",
//   },
//   {
//     url: bgcDefectImage,
//     name: "缺陷管理",
//   },
// ]);
// const activeTab = ref("video");
//
// function toggleActive(index) {
//   manageData.value.forEach((item, i) => {
//     item.isActive = i === index;
//   });
// }
//
// function setActiveTab(tab) {
//   activeTab.value = tab;
// }
</script>

<style lang="scss" scoped>
.rightContainer {
  float: right;
  display: flex;
  position: absolute;
  right: 17px;
  flex-direction: column;
  padding-top: 37px;
  z-index: 99;
  &-rightBox {
    width: 136px;
    height: 923px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-manageBox {
      width: 136px;
      height: 46px;
      background-size: 100% 100%;
      text-align: center;
      line-height: 46px;
      font-size: 16px;
      font-family: 58WindFont-Regular, 58WindFont;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      z-index: 9999;
    }
    &-toggle {
      width: 89px;
      height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      z-index: 999;
      &-noAction {
        width: 89px;
        height: 32px;
        background: linear-gradient(
          225deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.3) 100%
        );
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.23),
            rgba(255, 255, 255, 0)
          )
          1 1;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}
// 添加样式来表示活动状态
.active {
  // 添加你的活动样式
  background: linear-gradient(
    225deg,
    rgba(105, 193, 221, 0) 0%,
    rgba(105, 193, 221, 0.3) 100%
  );
  box-shadow: inset 0px 0px 10px 0px #69c1dd;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(124, 223, 255, 0.4),
      rgba(124, 223, 255, 0)
    )
    1 1;
  color: #ffffff;
}
.userFlex {
  scrollbar-width: auto;
  /* firefox */
  -ms-overflow-style: auto;
  /* IE 10+ */
  overflow-y: auto;
  //height: 175px;
}
</style>